<template>
  <view class="sift-box">
    <view class="sift-left" @tap="siftLastet">
      <span>按时间排序</span>
      <image src="../../static/svg/down.svg" mode=""></image>
    </view>
    <view class="sift-right" @tap="popupSiftOpen">
      <text>筛选</text>
      <image src="../../static/svg/icon-wrapper.svg" mode=""></image>
    </view>
  </view>

  <uni-popup ref="popup" background-color="#fff" borderRadius="32rpx 32rpx 0 0">
    <view class="popup-content">
      <ul class="popup-ul">
        <li
          class="popup-list"
          v-for="(item, index) in popupList"
          :key="index"
          @tap="siftList(index)"
        >
          <p>{{ item.txt }}</p>
          <image
            :src="item.checkUrl"
            mode=""
            v-if="index === activePopup"
          ></image>
          <text v-else></text>
        </li>
      </ul>
    </view>
  </uni-popup>
  <uni-popup
    ref="popupSift"
    background-color="#fff"
    borderRadius="32rpx 32rpx 0 0"
  >
    <slot></slot>
    <view class="btn-utils">
      <button class="reset-btn" @tap="resetEmit">
        <image src="@/static/svg/loop.svg" mode=""></image>
        <text>重置</text>
      </button>
      <button class="search-btn" @tap="searchEmit">
        <image src="@/static/svg/search.svg" mode=""></image>
        <text>查找</text>
      </button>
    </view>
  </uni-popup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'

import { ref, reactive, defineEmits, defineProps } from 'vue'
const popup = ref(null)
const emit = defineEmits([
  'siftList',
  'searchEmit',
  'resetEmit',
  'popupSiftOpen',
])
const props = defineProps({
  show: {
    type: Boolean,
    default: true,
  },
})
import { getTitleBarHeight } from '@/utils/system.js'
// 倒叙升序
const siftLastet = () => {
  if (props.show) {
    popup.value.open('bottom')
  }
}
let activePopup = ref(0)
let popupList = reactive([
  {
    txt: '按时间升序',
    checkUrl: '../../static/svg/check.svg',
  },
	{
	  txt: '按时间降序',
	  checkUrl: '../../static/svg/check.svg',
	},
])

const siftList = (i) => {
  activePopup.value = i
  emit('siftList', i)
	popup.value.close()
}

// 筛选
let popupSift = ref(null)
const popupSiftOpen = () => {
  if (props.show) {
    popupSift.value.open('bottom')
    emit('popupSiftOpen')
  }
}

const searchEmit = () => {
  emit('searchEmit', popupSift.value)
}
const resetEmit = () => {
  emit('resetEmit', popupSift.value)
}
onLoad(() => {})
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.sift-box {
  @include flex($align: center, $justify: space-between);
  position: fixed;
  left: 0;
  right: 0;
  height: 85rpx;
  background-color: #f7f8fa;
  z-index: $z-index;
  padding: 0 24rpx;

  .sift-left,
  .sift-right {
    background-color: #ffffff;
    padding: 16rpx 24rpx;
    border-radius: 16rpx;
    color: #4e5969;
    font-size: 26rpx;
    @include flex($align: center, $justify: space-between);

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .sift-left {
    width: 214rpx;
    height: 68rpx;
  }

  .sift-right {
    width: 136rpx;
    height: 68rpx;
  }
}

:deep(.popup-content) {
  padding: 32rpx;

  .popup-ul {
    list-style-type: none;
    padding: 0;
    height: 80%;
    line-height: 6vh;

    .popup-list {
      @include flex($align: center, $justify: space-between);

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.btn-utils {
  @include flex($align: center, $justify: space-between);
  padding-bottom: 40rpx;

  button {
    width: 327rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    @include flex($align: center, $justify: center);

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .reset-btn {
    background-color: #e8f3ff;
    color: #165dff;
  }

  .search-btn {
    background-color: #165dff;
    color: #fff;
  }
}
</style>
